<template>
  <el-cascader
    v-model="input"
    class="defaultStyle"
    :placeholder="placeholder"
    :disabled="disabled"
    :options="options"
    :style="cssstyle"
    clearable
    filterable
  />
</template>

<script>
export default {
  name: "AreaSelect",
  props: {
    cssstyle: {
      type: Object,
      default() {
        return {};
      }
    },
    field: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: "请选择"
    }
  },
  data() {
    return {
      options: [],
      input: []
    };
  },
  computed: {
    // input: {
    //   get() {
    //     console.log("");
    //   },
    //   set(val) {
    //     this.$emit("click", { val: val, field: this.field });
    //   }
    // }
  },
  watch: {
    input(val) {
      this.$emit("click", { val: val, field: this.field });
    }
  },
  async mounted() {
    const result = await this.$api.enterpriseManagement.enterpriseManagement.getAreaList();
    if (result) {
      const resultOptions = result.data.map(item => {
        item.children.unshift({
          label: "全部",
          value: "",
          name: "全部",
          children: []
        });
        return {
          label: item.name,
          value: item.code,
          children: item.children.map(item => {
            item.children.unshift({
              label: "全部",
              value: "",
              name: "全部"
            });
            return {
              label: item.name,
              value: item.code,
              children: item.children.map(item => {
                return {
                  label: item.name,
                  value: item.code
                };
              })
            };
          })
        };
      });
      this.options = resultOptions;
      console.log(resultOptions, ">>>>>>>>><<<<<<<<<<<<<");
    }
  }
};
</script>
<style lang="scss" scoped>
.defaultStyle {
  width: 150px;
}
</style>
